<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-form>
      <a-form-item :labelCol="{ span: 7 }" :wrapperCol="{ span: 10 }">
        <a-button :loading="loading" @click="submit" type="primary">
          同步
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-table
          rowKey="id"
          :defaultExpandAllRows="true"
          :columns="columns"
          :data-source="data"
        >
          <template #hidden="{ text }">
            <a href="javascript:void(0);">{{ text.hidden }}</a>
          </template>
        </a-table>
      </a-form-item>
    </a-form>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { LoginFrom } from "@/types/views/login";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import {
  UserOutlined,
  LockOutlined,
  QrcodeOutlined,
} from "@ant-design/icons-vue";
import ResultEnum from "@/config/ResultEnum";
import menus from "@/config/menus/index";
import { doAsync, cols } from "./index";
import { treeTransToArray } from "@/utils/common";

export default defineComponent({
  components: {},
  setup() {
    console.log(menus);

    const router = useRouter();
    const loading = ref(false);
    const data = ref(menus);
    const columns = ref([
      {
        title: "名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "URL",
        dataIndex: "path",
        key: "path",
      },
      {
        title: "标识",
        dataIndex: "key",
        key: "key",
      },
      {
        title: "跳转",
        dataIndex: "redirect",
        customRender: (record: any) => {
          return record.text;
        },
      },
      {
        title: "隐藏",
        key: "hidden",
        slots: { customRender: "hidden" },
      },
    ]);

    const submit = () => {
      loading.value = true;
      let postData = treeTransToArray(menus, "children");
      for (let item of postData) {
        item.parentId = item.pid;
      }
      doAsync(postData).then((res: any) => {
        loading.value = false;
        if (ResultEnum.SUCCESS_CODE == res.code) {
          message.success("同步成功");
        } else {
          message.error(res.message);
        }
      });
    };

    onMounted(() => {});

    return { loading, submit, data, columns };
  },
});
</script>
